<template>
	<div class="step1">
		<ul class="uls">
			<li class="lis">
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.approvalDate">
						<el-form slot="reference">
							<el-form-item label="核准日期">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('approvalDate', '核准日期', 'dateInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-date-picker
						@change="focusUpdate('approvalDate')"
						type="date"
						v-model="dateInfo.approvalDate"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
					></el-date-picker>
				</div>
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.deferRaiseDate">
						<el-form slot="reference">
							<el-form-item label="延期募集备案日期">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('deferRaiseDate', '延期募集备案日期', 'dateInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-date-picker
						@change="focusUpdate('deferRaiseDate')"
						type="date"
						v-model="dateInfo.deferRaiseDate"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
					></el-date-picker>
				</div>
			</li>

			<li class="lis">
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.raiseStartDate">
						<el-form slot="reference">
							<el-form-item label="募集起始日" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('raiseStartDate', '募集起始日', 'dateInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-date-picker
						@change="focusUpdate('raiseStartDate')"
						type="date"
						v-model="dateInfo.raiseStartDate"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
					></el-date-picker>
					<div class="blurmsg" v-if="isCheck && !!!dateInfo.raiseStartDate">请确认募集起始日</div>
				</div>
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.establishDate">
						<el-form slot="reference">
							<el-form-item label="合同生效日">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('establishDate', '合同生效日', 'dateInfo')">(未复核)</span>
								</span>
								<span style="color: red" v-show="isEnterDateHtmlPro == '3' && !!!dateInfo.establishDate">(请填写)</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-date-picker
						type="date"
						v-model="dateInfo.establishDate"
						:picker-options="pickerOption2"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
						@input="changeTime1"
					></el-date-picker>
				</div>
			</li>

			<li class="lis">
				<div class="div2">
					<el-popover
						placement="top-start"
						width="200"
						trigger="hover"
						:content="$store.getters.hoverPerty.dateInfo.logonApprovalChangeDate"
					>
						<el-form slot="reference">
							<el-form-item label="注册批文变更日期">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('logonApprovalChangeDate', '注册批文变更日期', 'dateInfo')"
										>(未复核)</span
									>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-date-picker
						@change="focusUpdate('logonApprovalChangeDate')"
						type="date"
						v-model="dateInfo.logonApprovalChangeDate"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
					></el-date-picker>
				</div>
			</li>

			<li class="lis yujiParnode">
				<div class="children1">
					产品展期时，同时修改“合同预计到期日（人行）”与“合同预计到期日（证监）”；产品提前终止时，仅修改“合同预计到期日（证监）”
				</div>
				<div class="lis children2">
					<div class="div2">
						<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.contractEndDate">
							<el-form slot="reference">
								<el-form-item label="合同预计到期日（证监）">
									<span v-if="['6'].includes(dataType)">
										<span style="color: red" v-if="publicCompare('contractEndDate', '合同预计到期日（证监）', 'dateInfo')"
											>(未复核)</span
										>
									</span>
								</el-form-item>
							</el-form>
						</el-popover>
					</div>
					<div class="div2">
						<el-date-picker
							type="date"
							:picker-options="pickerOption1"
							@input="changeTime2('contractEndDate')"
							v-model="dateInfo.contractEndDate"
							@change="Securities()"
							value-format="yyyyMMdd"
							format="yyyyMMdd"
							:disabled="isBaseDisabled"
						></el-date-picker>
					</div>
					<div class="div2">
						<el-popover
							placement="top-start"
							width="200"
							trigger="hover"
							:content="$store.getters.hoverPerty.dateInfo.contractEndDatePeople"
						>
							<el-form slot="reference">
								<el-form-item label="合同预计到期日（人行）">
									<span v-if="['6'].includes(dataType)">
										<span style="color: red" v-if="publicCompare('contractEndDatePeople', '合同预计到期日（人行）', 'dateInfo')"
											>(未复核)</span
										>
									</span>
								</el-form-item>
							</el-form>
						</el-popover>
					</div>
					<div class="div2">
						<el-date-picker
							type="date"
							:picker-options="pickerOption1"
							v-model="dateInfo.contractEndDatePeople"
							@input="changeTime2('contractEndDatePeople')"
							value-format="yyyyMMdd"
							format="yyyyMMdd"
							:disabled="isBaseDisabled"
						></el-date-picker>
					</div>
				</div>
			</li>

			<li class="lis">
				<div class="div2">
					<el-popover
						placement="top-start"
						width="200"
						trigger="hover"
						:content="$store.getters.hoverPerty.dateInfo.liquidateAccompleteDate"
					>
						<el-form slot="reference"
							><el-form-item label="清盘完成日">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('liquidateAccompleteDate', '清盘完成日', 'dateInfo')">(未复核)</span>
								</span>
								<span style="color: red" v-show="isEnterDateHtmlPro == '2' && !!!dateInfo.liquidateAccompleteDate">(请填写)</span>
							</el-form-item></el-form
						>
					</el-popover>
				</div>
				<div
					class="div2"
					:class="{
						div3:
							$store.state.fundStep.publicBaseInfo.marketFundType !== '1' &&
							$store.state.fundStep.publicBaseInfo.marketFundType !== '2',
					}"
				>
					<el-date-picker
						type="date"
						v-model="dateInfo.liquidateAccompleteDate"
						:picker-options="pickerOption3"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						@change="focusUpdate('liquidateAccompleteDate')"
						:disabled="isEnterDateHtmlPro !== '2'"
					></el-date-picker>
				</div>
				<div class="div2" v-if="['1', '2'].includes($store.state.fundStep.publicBaseInfo.marketFundType)">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.endListDate">
						<el-form slot="reference">
							<el-form-item label="终止上市日">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('endListDate', '终止上市日', 'dateInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2" v-if="['1', '2'].includes($store.state.fundStep.publicBaseInfo.marketFundType)">
					<el-date-picker
						@change="focusUpdate('endListDate')"
						type="date"
						v-model="dateInfo.endListDate"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
					></el-date-picker>
				</div>
			</li>

			<li class="lis">
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.operateEndDate">
						<el-form slot="reference">
							<el-form-item label="合同实际到期日">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('operateEndDate', '合同实际到期日', 'dateInfo')">(未复核)</span>
								</span>
								<span style="color: red" v-show="isEnterDateHtmlPro == '1' && !!!dateInfo.operateEndDate">(请填写)</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-date-picker
						type="date"
						:picker-options="pickerOption1"
						@input="changeTime2('operateEndDate')"
						v-model="dateInfo.operateEndDate"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
					></el-date-picker>
				</div>
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.liquidationStartDate">
						<el-form slot="reference">
							<el-form-item label="清算开始日期">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('liquidationStartDate', '清算开始日期', 'dateInfo')">(未复核)</span>
								</span>
								<span style="color: red" v-show="isEnterDateHtmlPro == '2' && !!!dateInfo.liquidationStartDate">(请填写)</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-date-picker
						type="date"
						@input="changeTime2('liquidationStartDate')"
						:picker-options="pickerOption1"
						v-model="dateInfo.liquidationStartDate"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
					></el-date-picker>
				</div>
			</li>

			<li class="lis">
				<div class="div2" v-if="!!$store.state.fundStep.publicBaseInfo.evolveBeforeCode">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.formalEvolveDate">
						<el-form slot="reference">
							<el-form-item label="正式转型日期" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('formalEvolveDate', '正式转型日期', 'dateInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3" v-if="!!$store.state.fundStep.publicBaseInfo.evolveBeforeCode">
					<el-date-picker
						@change="focusUpdate('formalEvolveDate')"
						type="date"
						v-model="dateInfo.formalEvolveDate"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
					></el-date-picker>
					<div class="blurmsg" v-if="isCheck && !!!dateInfo.formalEvolveDate">请确认正式转型日期</div>
				</div>
			</li>

			<li class="lis">
				<div
					class="div2"
					v-if="
						$store.state.fundStep.publicBaseInfo.operateMode == '1' &&
						!!$store.state.fundStep.publicBaseInfo.openFrequency &&
						$store.state.fundStep.publicBaseInfo.openFrequency !== '1'
					"
				>
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.nextOpenFirstDate">
						<el-form slot="reference">
							<el-form-item label="下次开放期首日" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('nextOpenFirstDate', '下次开放期首日', 'dateInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div
					class="div2"
					:class="{ div3: $store.state.fundStep.publicBaseInfo.isHoldFund !== '0' }"
					v-if="
						$store.state.fundStep.publicBaseInfo.operateMode == '1' &&
						!!$store.state.fundStep.publicBaseInfo.openFrequency &&
						$store.state.fundStep.publicBaseInfo.openFrequency !== '1'
					"
				>
					<el-date-picker
						@change="focusUpdate('nextOpenFirstDate')"
						type="date"
						v-model="dateInfo.nextOpenFirstDate"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
					></el-date-picker>
					<div class="blurmsg" v-if="isCheck && !!!dateInfo.nextOpenFirstDate">请选择下次开放期首日</div>
				</div>
				<div class="div2" v-if="$store.state.fundStep.publicBaseInfo.isHoldFund == '0'">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.dateInfo.firstRedemptionDate">
						<el-form slot="reference">
							<el-form-item label="首次打开赎回日" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('firstRedemptionDate', '首次打开赎回日', 'dateInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div
					class="div2"
					:class="{
						div3: $store.state.fundStep.publicBaseInfo.operateMode !== '1' || $store.state.fundStep.publicBaseInfo.openFrequency == '1',
					}"
					v-if="$store.state.fundStep.publicBaseInfo.isHoldFund == '0'"
				>
					<el-date-picker
						@change="focusUpdate('firstRedemptionDate')"
						type="date"
						v-model="dateInfo.firstRedemptionDate"
						value-format="yyyyMMdd"
						format="yyyyMMdd"
						:disabled="isBaseDisabled"
					></el-date-picker>
					<div class="blurmsg" v-if="isCheck && !!!dateInfo.firstRedemptionDate">请确认首次打开赎回日</div>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
import { newSaveDate } from '@/api/productApi/infoMain'
import { publicCompare } from '@/views/infoMain/publicList/components/dataCheck'
import { dateReview } from '@/views/infoMain/publicList/components/dataReview'
import { jsonArray } from '@/api/productApi/file'
export default {
	name: 'Step2',
	props: {
		setpFunc: {
			type: Function,
			default: Function
		},
		fundSysCode: {
			type: String,
			default: ''
		},
		dataType: {
			type: String,
			default: ''
		},
		isEnterDateHtmlPro: {
			type: String,
			default: ''
		},
		haveYouWalked: {
			type: Object,
			default: Object
		}
	},
	data() {
		return {
			dateInfo: {},
			isBaseDisabled: false,
			isEnterDateHtml: '', // 1终止,2清算,3成立
			isCheck: false,
			establishDate: '', // 合同生效日
			contractEndDate: '', // 合同预计到期日
			operateEndDate: '', // 合同实际到期日
			liquidationStartDate: '', // 清算开始日
			publicCompare,
			get pickerOption3() {
				const _this = this
				return {
					disabledDate(time) {
						if (_this.operateEndDate) {
							return time.getTime() < _this.operateEndDate.getTime()
						}
					}
				}
			},
			get pickerOption1() {
				const _this = this
				return {
					disabledDate(time) {
						if (_this.establishDate) {
							return time.getTime() < _this.establishDate.getTime()
						}
					}
				}
			},
			get pickerOption2() {
				const _this = this
				return {
					disabledDate(time) {
						if (_this.contractEndDate) {
							return time.getTime() > _this.contractEndDate.getTime() - 86400000
						}
						if (_this.operateEndDate) {
							return time.getTime() > _this.operateEndDate.getTime() - 86400000
						}
						if (_this.liquidationStartDate) {
							return time.getTime() > _this.liquidationStartDate.getTime() - 86400000
						}
						if (!!_this.contractEndDate && !!_this.operateEndDate && !!_this.liquidationStartDate) {
							return (
								time.getTime() > _this.liquidationStartDate.getTime() - 86400000 &&
								time.getTime() > _this.operateEndDate.getTime() - 86400000 &&
								time.getTime() > _this.contractEndDate.getTime() - 86400000
							)
						}
					}
				}
			}
		}
	},

	created() {
		this.$bus.$on('publicClearDate', property => {
			if (this.dataType !== '1') {
				this.dateInfo[property] = ''
			}
		})
	},

	methods: {
		focusUpdate(property) {
            if (property) {
                if (!this.dateInfo[property] || this.timerConversion(this.dateInfo[property]).toDateString() === 'Invalid Date') {
                    this.dateInfo[property] = null
			    }
            }
			this.$forceUpdate()
		},

		// 重新申请将数据集中在store
		updateStoreData() {
			this.$store.state.fundStep.pucliktTotalData.productFundApply.dateInfo = this.dateInfo
		},

		isBaseDisabledCom(data, msgShow) {
			this.isBaseDisabled = data
			this.isCheck = msgShow
		},

		edit(data) {
			this.dateInfo = jsonArray(data)
			const list = ['establishDate', 'contractEndDate', 'operateEndDate', 'liquidationStartDate', 'contractEndDatePeople']
			list.forEach(item => {
				if (this.dateInfo[item]) {
					this.changeTime2(item)
				}
			})
			// this.Securities()
		},

		// 在新增或者复制时，将预计到期日（证监）赋值给预计到期日（人行）
		Securities() {
			if (['', '1'].includes(this.dataType) && this.dateInfo.contractEndDate) {
				this.dateInfo.contractEndDatePeople = this.dateInfo.contractEndDate
				this.focusUpdate()
			}
		},

		// 完善信息切换步骤时保存切换前页面数据
		async switchingSteps() {
			const params = {}
			params.productFundApply = {}
			params.productFundApply.dateInfo = this.dateInfo
			params.fundRaiseType = '1'
			params.fundSysCode = this.fundSysCode
			await newSaveDate(params).then(res => {
				if (res.msgCode === 'Y') {
					this.$emit('setpFunc', '1', this.fundSysCode, '', 1)
				}
			})
			return true
		},

		ValidationRequired() {
			return dateReview(this.dateInfo)
		},

		// 新增:【保存】和【下一步】
		startDown(type) {
			this.isCheck = true
			this.CustomtextComfirm(() => {
				const params = {}
				params.productFundApply = {}
				params.productFundApply.dateInfo = this.dateInfo
				params.fundRaiseType = '1'
				params.fundSysCode = this.fundSysCode
				newSaveDate(params).then(res => {
					if (res.msgCode === 'Y') {
						if (type === '下一步') {
							this.$emit('setpFunc', '1', this.fundSysCode, '', 0)
						} else {
							this.$emit('setpFunc', '1', this.fundSysCode, '', 1)
						}
						this.$message({ type: 'success', message: res.msg })
					}
				})
			}, `${!dateReview(this.dateInfo).length ? '此操作将永久提交已编辑数据，是否继续' : `必填项 “ ${dateReview(this.dateInfo).join('、')} ” 未填写，是否确认提交`}？`)
		},

		// 合同生效日
		changeTime1() {
			if (this.dateInfo.establishDate) {
				this.changeTime2('establishDate')
			} else {
				this.establishDate = null
			}
		},

		timerConversion(timer) {
			return new Date(`${timer.substring(0, 4)}-${timer.substring(4, 6)}-${timer.substring(6, 8)}`)
		},

		// 合同实际到期日
		changeTime2(dataType) {
			if (this.dateInfo[dataType] && this.timerConversion(this.dateInfo[dataType]).toDateString() !== 'Invalid Date') {
				this[dataType] = this.timerConversion(this.dateInfo[dataType])
			} else {
				this[dataType] = null
                this.dateInfo[dataType] = null
			}
			this.focusUpdate()
		},

		getData() {
			// 当切换到日期信息时，使用全局数据联动本页面
			this.$store.state.fundStep.publicBaseInfo = jsonArray(this.$store.state.fundStep.pucliktTotalData.productFundApply.baseInfo)
		}
	}
}
</script>
<style lang="scss" scoped >
::v-deep .yujiParnode {
	border: 1px solid #dddddd !important;
	border-bottom: none !important;
	border-right: none !important;
	flex-wrap: wrap !important;
}
::v-deep .children1 {
	padding: 10px 10px 0px 10px !important;
	color: red !important;
}
::v-deep .children2 {
	margin: 10px;
	border-right: 1px solid #dddddd !important;
	border-bottom: 1px solid #dddddd !important;
}
</style>
